<template>
    <el-form-item v-loading="bodyLoading" label="规格选项">
        <el-card v-for="(item, index) in sku_card_list" :key="item.id" v-loading="item.loading" shadow="never" class="mb-3 w-full">
            <template #header>
                <div class="flex items-center">
                    <el-input v-model="item.text" placeholder="规格名称" style="width: 200px" @change="handleUpdate(item)">
                        <template #append>
                            <el-icon class="cursor-pointer" @click="handleChooseSku(item)"><more /></el-icon>
                        </template>
                    </el-input>
                    <el-button class="ml-auto" size="small" :disabled="index == 0" @click="sortCard('up', index)"
                        ><el-icon><Top /></el-icon
                    ></el-button>

                    <el-button size="small" :disabled="index === sku_card_list.length - 1" @click="sortCard('down', index)"
                        ><el-icon><Bottom /></el-icon
                    ></el-button>

                    <el-popconfirm title="是否要删除该选项？" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDelete(item)">
                        <template #reference>
                            <el-button size="small"
                                ><el-icon><Delete /></el-icon
                            ></el-button>
                        </template>
                    </el-popconfirm>
                </div>
            </template>
            <SkuCardItem :sku-card-id="item.id" />
        </el-card>
        <el-button type="success" size="small" :loading="btnLoading" @click="addSkuCardEvent">添加规格选项</el-button>
    </el-form-item>

    <ChooseSku ref="ChooseSkuRef" />
</template>
<script setup>
import { ref } from 'vue'
import SkuCardItem from './SkuCardItem.vue'
import ChooseSku from '~/components/ChooseSku.vue'
import { sku_card_list, addSkuCardEvent, btnLoading, handleUpdate, handleDelete, sortCard, bodyLoading, handleChooseSetGoodsSkusCard } from '~/composables/useSku.js'

const ChooseSkuRef = ref(null)
const handleChooseSku = (item) => {
    ChooseSkuRef.value.open((value) => {
        handleChooseSetGoodsSkusCard(item.id, {
            name: value.name,
            value: value.list,
        })
    })
}
</script>
<style>
.el-card__header {
    @apply bg-gray-50 !p-2;
}
</style>
